@charset "utf-8";
@import "reset";
body{
    overflow: hidden;
}
.wrap{
    width: 100vw;
    height: 100vh;
    padding-right: vw(150);
    overflow: auto;
   
    header{
        width: 100%;
        height: vw(110);
    .header{
        width: 100%;
        height: vw(50);
        padding: vw(30) 0;
       text-align: center;
       position: fixed;
       z-index: 999;
       background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .button{
            button{              
              width: vw(110);
              height: vw(60);
               border-radius: vw(40);
               border: 2px solid #ff9344;
               outline: none;
               font-weight: bold;
               background-color: #fff;
            }
        }
        .city{
            width: vw(170);
            height: vw(50);
            border: 2px solid orange;
           transform: translateX(-1vw);
            select{
                width: vw(130);
                height: vw(50);
                border: none;
                outline: none;
                background-color: transparent;
                font-weight: bold;
            }
            &::after {
                content: "";
                display: block;
                border: 10px solid #ff9344;
                border-color: #ff9344 transparent transparent transparent;
                width: 0;
                height: 0;
                position: absolute;
                right: vw(13);
                top: vw(18);
                pointer-events: none;
            }
        }
    }
  }
  main{
    //   width: 100%;
    padding-bottom: vw(130);
      .search{
        border: 2px solid orange;
        box-sizing: border-box;
        border-radius: vw(56);
        position: relative;
        width: vw(300);
        margin: 0 vw(210);
        .icon-fangdajing-copy{
            position: absolute;
            right: vw(35);
            top: vw(0);
            font-size: vw(55);
            color: #ff9344;
        }
        input{
            font-size: vw(12);
           width: vw(290);
            line-height: vw(56);
            border: none;
            outline: none;
            background-color: transparent;
            padding-left: vw(30);
        }
    }
    .searching{
        width: 100%;
        height: vw(60);
        margin-top: vw(30);
      & h3{
         margin: 0 vw(270);
       }
    }
    .details{
        width: 94%;
        height: vw(200);
       text-align: center;
       justify-content: center;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-around;
        & span{
            width: 20.5%;
            border: 2px solid #fff;
            box-sizing: border-box;
            height: vw(100);
            background-color: rgb(220,220,220);
            text-align: center;
           line-height: vw(80);
           color: rgb(142,142,142);
        }
    }
    .hots{
        width: 100%;
        height: vw(150);
        display: flex;
      text-indent: 1em;
      line-height: vw(140);
      .icon-remensousuo{
          font-size: vw(60);
          color: #ff9344;
      }
      .hots_search{
         display: flex;
         width: 75%;
         justify-content: space-between;
         align-items: center;
      }
    }
    .sushi{
        width: 100%;
        height: vw(375);
        display: flex;
        justify-content: space-evenly;
    .right{
        width: vw(380);
        .top{
            & img{
                width: vw(380);
                height: vw(160);
            }
        }
        .bottom{
            & img{
                width: vw(185);  
                height: vw(190);
            }
        }
    }
    }

    .hots_one{
        width: 100%;
        height: vw(150);
        display: flex;
      text-indent: 1em;
      line-height: vw(140);
      .icon-xingzhuang60kaobei2{
          font-size: vw(60);
          color: #ff9344;
      }
      .hots_search{
         display: flex;
         width: 75%;
         justify-content: space-between;
         align-items: center;
      }
    }
   .recommended{
       width: 94%;
       height: vw(190);
       display: flex;
       justify-content: space-around;
       & img{
           width: 25%;
       }
   }
  }
  footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
    .list{
        width: 100%;
        height: vw(130);
        display: flex;
        justify-content: space-around;
        // align-items: center;
      & a{
        color: black;
      }
        background-color: #fff;
        .icon-index,.icon-category,.icon-wode2{
            font-size: vw(70);
            color: #ff9344;
        }
        .icon-faxian{
           font-size: vw(70);
           color: #ff9344;
        }
       }

}
}
// footer{
//     width: 100%;
//     height: vw(150);
   
//     .list{
//         width: 100%;
//         height: vw(130);
//         display: flex;
//         justify-content: space-around;
//         // align-items: center;
//         position: fixed;
//         bottom: -1px;
//         z-index: 999;
//         background-color: #fff;
//         .icon-index,.icon-category,.icon-wode2{
//             font-size: vw(70);
//             color: #ff9344;
//         }
//         .icon-faxian{
//            font-size: vw(80);
//            color: #ff9344;
//         }

//         .listfont{
//             width: 100%;
//             height: vw(55);
//            display: flex;
//            justify-content: space-around;
//            position: fixed;
//             bottom: 0;
//         }
//        }

// }